<template>
  <!--  文件 -->
  <view-border uploadFile="true">
    <!-- 当内容为空 -->
    <div @contextmenu.prevent="openMenu($event,{item:'other'})" style="height:100%">
      <el-empty description="内容为空" v-if="empty"></el-empty>
      <div class="folder-position">
        <div v-for="(item,index) in folderList" :key="item['folderFileId']"
             @contextmenu.prevent.stop="openMenu($event,{item:'folder',Id:item['folderFileId']})"
              @dblclick="openFolder({folderId:item['folderFileId'],folderName:item['folderName']})">
          <!--     提示框     -->
          <el-tooltip placement="bottom">
            <div slot="content">{{ item['folderName'] }}<br/>创建时间:{{item['folderCreateTime']}}</div>
            <!--     文件夹卡片       -->
            <component is="folderCard" :name="item['folderName']"></component>
          </el-tooltip>
        </div>
        <div v-for="(item,index) in fileList" :key="item['folderFileId']"
             @contextmenu.prevent.stop="openMenu($event,{item:'file',Id:item['folderFileId']})">
          <el-tooltip placement="bottom">
            <div slot="content">{{ item['fileName'] }}<br/>创建时间:{{item['fileUploadTime']}}</div>
            <component is="fileCard" :name="item['fileName']"></component>
          </el-tooltip>
        </div>
      </div>
      <!--  上传文件组件，dialogVisible控制渲染状态，false不显示  -->
      <UploadFile :dialogVisible="dialogFileVisible" @close="closeEvent"></UploadFile>
      <!-- 创建文件夹组件 -->
      <CreateFolder :dialogVisible="dialogFolderVisible" @close="closeEvent"></CreateFolder>
      <!-- 自定义鼠标菜单   -->
      <MenuItem v-show="visible" :style="{left:left+'px',top:top+'px'}" :status="MenuStatus"
                @events="getEvents" @deleteEvent="deleteEvent"></MenuItem>
    </div>
  </view-border>
</template>

<script>
import api from "../../apis/api";

export default {
  name: "File",
  data() {
    return {
      visible: false, // 鼠标右键菜单是否显示
      top: 0,
      left: 0,
      MenuStatus: 'other',
      folderList: [], // 文件夹列表
      fileList: [], // 文件列表
      dialogFileVisible: false, //上传文件框是否显示
      dialogFolderVisible: false   // 创建文件夹
    }
  },
  computed: {
    empty() { //数据为空
      return this.folderList.length === 0 && this.fileList.length === 0;
    },
    folderId(){
      return this.$store.state.folder
    }
  },
  watch: {
    visible(value) {
      // 监听菜单状态，显示则添加点击关闭事件，否则移除
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    // 监听文件夹变化
    '$store.state.folder':{
      handler(newVal, oldVal){
        let newFolder = {
          folderId: newVal.folderId,
          folderName: newVal.folderName
        }
        this.openFolder(newFolder)
      },
      deep: true
    }
  },
  async mounted() {
    await this.openFolder(this.$store.state.folder)
  },
  methods: {
    // 获取文件夹数据
    async getFolderContent(folder) {
      api.getFolderContent(folder.folderId).then(response => {
        if (response.code === 200) {
          this.folderList = response.data['folder']
          this.fileList = response.data['file']
        }
      })
    },
    // 打开文件夹
    async openFolder(folder){
      this.$store.commit("setFolder",folder)
      this.$store.commit("addFolderPath",folder)
      await this.getFolderContent(folder);
    },
    // 打开菜单
    openMenu(e, item) {
      this.MenuStatus = item;
      this.top = e.pageY;
      this.left = e.pageX;
      this.visible = true;
    },
    // 关闭菜单
    closeMenu() {
      this.visible = false;
    },
    // 获取菜单点击事件，
    getEvents(event) {
      // 判断用户选项
      if (event === 'uploadFile') {
        this.dialogFileVisible = true;
      }
      if (event === 'createFolder') {
        this.dialogFolderVisible = true;
      }
    },
    // 删除文件或文件夹事件
    deleteEvent(e){
      console.log(e)
      if (e.type === 'folder'){
        this.folderList = this.folderList.filter(item=>{
          return item['folderFileId'] !== e.id;
        })
      }else {
        this.fileList = this.fileList.filter(item=>{
          console.log(e.id)
          return item['folderFileId'] !== e.id;
        })
      }
    },
    // 对话框关闭回调
    closeEvent() {
      this.dialogFileVisible = false;
      this.dialogFolderVisible = false;
    }
  }
}
</script>
